<template>
  <div class="plugin-box">
    <Card class="mb-16 pre-group-card">
      <Row type="flex" justify="space-between" align="middle">
        <Col>
          <Row type="flex" align="middle" gutter="8">
            <Col
              ><Tag type="primary" style="color: #fff"
                ><span style="color: #fff">预分组</span></Tag
              ></Col
            >
            <Col>
              <span class="code"> {{ groupParams.groupInfo.code || '' }}</span>
              <Badge status="error" text="基础病组" />
            </Col>
          </Row>
        </Col>
        <Col span="24" style="display: flex; align-items: center; justify-content: center">
          <span class="code"> {{ groupParams.groupInfo.name }}</span>
        </Col>
      </Row>
      <!-- 指标统计 -->
      <Row class="mt-16" type="flex" align="middle" gutter="24">
        <Col span="8">
          <div class="stat">
            <div class="label">点数</div>
            <div class="value">{{ groupParams.groupInfo.point }}</div>
          </div>
        </Col>
        <Col span="8">
          <div class="stat">
            <div class="label">分值</div>
            <div class="value">{{ groupParams.groupInfo.socre }}</div>
          </div>
        </Col>
        <Col span="8">
          <div class="stat">
            <div class="label">倍率</div>
            <div class="value" style="display: flex">
              {{ groupParams.groupInfo.rate ? groupParams.groupInfo.rate.toFixed(2) : '' }}
              <Tag color="error" v-if="groupParams.groupInfo.rate > 0">高倍率</Tag>
            </div>
          </div>
        </Col>
        <Col span="12">
          <div class="stat">
            <div class="label">医保类型</div>
            <div class="value">{{ insuedType }}</div>
          </div>
        </Col>
        <Col span="12">
          <div class="stat">
            <div class="label">费用结余</div>
            <div class="value error">-1000</div>
          </div>
        </Col>
      </Row>
      <!-- 付费明细 -->
      <Row class="mt-12 detail-row" type="flex" align="middle" gutter="16">
        <Col
          ><span>付费标准（元）：{{ details.payStandard }}</span></Col
        >
        <Col
          ><span>住院时间标准（天）：{{ details.standardDays }}</span></Col
        >
        <Col
          ><span>当前费用（元）：{{ details.currentCost }}</span></Col
        >
        <Col
          ><span>当前住院时间（天）：{{ details.currentDays }}</span></Col
        >
      </Row>
    </Card>

    <!-- 得分与确认项 -->
    <Card class="mb-16 score-card">
      <Row type="flex" justify="space-between" align="middle">
        <Col>
          <div class="score-box">
            <div class="main-score">95分</div>
            <div class="sub-label">清单得分</div>
          </div>
        </Col>
        <Col>
          <div class="score-box">
            <div class="main-score">3项</div>
            <div class="sub-label">扣分项</div>
          </div>
        </Col>
        <Col>
          <Row type="flex" align="middle" gutter="8">
            <Col
              ><div class="legend legend-affect"></div>
              影响分组</Col
            >
            <Col
              ><div class="legend legend-unaffect"></div>
              不影响分组</Col
            >
          </Row>
        </Col>
      </Row>
    </Card>

    <!-- 清单质控 -->
    <Card class="mb-16">
      <Row type="flex" justify="space-between" align="middle">
        <Col><h3>清单质控</h3></Col>
        <Col><Button type="primary" @click="viewChargeDetail">查看收费明细</Button></Col>
      </Row>
      <List :data-source="checkListItems" bordered>
        <List-item v-for="(item, index) in checkListItems" :key="index">
          <List-item-meta
            :title="`${item.propertyName} 编码 ${item.property}`"
            :description="item.msg"
          />
        </List-item>
      </List>
    </Card>

    <!-- 基础质控 -->
    <Card class="mb-16">
      <h3>基础质控</h3>
      <List :data-source="basicCheckItems" bordered>
        <List-item v-for="(item, idx) in basicCheckItems" :key="idx">
          <List-item-meta :title="item.field" :description="item.rule" />
        </List-item>
      </List>
    </Card>

    <!-- 推荐诊断与手术 -->
    <Card>
      <Collapse v-model="openValue">
        <Panel name="1">
          插件推荐诊断
          <Button type="success" size="small" @click="selectOption(item)">选择</Button>
          <template #content>
            <List :data-source="recommendations" bordered>
              <List-item v-for="(rec, i) in recommendations" :key="i">
                <!-- 内容同上 -->
                <Row type="flex" justify="space-between" align="middle">
                  <Col>
                    <p>插件推荐手术及操作：{{ rec.diagnosis }}</p>
                    <p>推荐分组：{{ rec.procedure }}</p>
                    <p>权重：{{ rec.standardCost }}</p>
                    <p>标杆费用：{{ rec.standardCost }}</p>
                    <p>标杆住院天数：{{ rec.standardDays }}天</p>
                  </Col>
                </Row>
              </List-item>
            </List>
            <Divider />
            <List :data-source="recommendations" bordered>
              <List-item v-for="(rec, i) in recommendations" :key="i">
                <Row type="flex" justify="space-between" align="middle">
                  <Col>
                    <p>插件推荐主诊断：{{ rec.diagnosis }}</p>
                    <p>推荐分组：{{ rec.procedure }}</p>
                    <p>权重：{{ rec.standardCost }}</p>
                    <p>标杆费用：{{ rec.standardCost }}</p>
                    <p>标杆住院天数：{{ rec.standardDays }}天</p>
                  </Col>
                </Row>
              </List-item>
            </List>
          </template>
        </Panel>

        <Panel name="2">
          目前主诊断
          <template #content>
            <List :data-source="diseaseList" bordered>
              <List-item v-for="(item, i) in diseaseList" :key="i">
                <Row type="flex" justify="space-between" align="middle">
                  <Col :span="24">
                    <!-- <p>推荐主手术及操作：{{ item.diagnosis }}</p> -->
                    <p>推荐分组：{{ item.disease_Code }} {{ item.diag_Name }}</p>
                    <p v-if="policy === 'DIP'">分值：{{ item.score }}</p>
                    <p v-if="policy === 'DIP'">
                      点值：{{ insuedType === '职工医保' ? item.ZGDZ : item.JMDZ }}
                    </p>
                    <p v-if="policy === 'DRG'">权重：{{ item.Score }}</p>
                    <p v-if="policy === 'DRG'">费率：{{ item.standardCost }}</p>
                    <p>标杆费用：{{ insuedType === '职工医保' ? item.zgffbz : item.jmffbz }}</p>
                    <p>标杆住院天数： {{ item.ZYTSBGZ }}天</p>
                  </Col>
                  <Col><Tag v-if="item.chosen">已选择</Tag></Col>
                </Row>
              </List-item>
            </List>
          </template>
        </Panel>

        <Panel name="3">
          目前主手术及操作
          <template #content>
            <List :data-source="operationList" bordered>
              <List-item v-for="(item, i) in operationList" :key="i">
                <!-- 内容同上 -->
                <Row type="flex" justify="space-between" align="middle">
                  <Col :span="24">
                    <!-- <p>推荐主诊断：{{ item.disease_Code }}</p> -->
                    <p>推荐分组：{{ item.disease_Code }} {{ item.diag_Name }}</p>
                    <p v-if="policy === 'DIP'">分值：{{ item.score }}</p>
                    <p v-if="policy === 'DIP'">
                      点值：{{ insuedType === '职工医保' ? item.ZGDZ : item.JMDZ }}
                    </p>
                    <p v-if="policy === 'DRG'">权重：{{ item.Score }}</p>
                    <p v-if="policy === 'DRG'">费率：{{ item.standardCost }}</p>
                    <p>标杆费用：{{ insuedType === '职工医保' ? item.zgffbz : item.jmffbz }}</p>
                    <p>标杆住院天数： {{ item.ZYTSBGZ }}天</p>
                  </Col>
                  <!-- <Col><Tag v-if="rec.chosen">已选择</Tag></Col> -->
                </Row>
              </List-item>
            </List>
          </template>
        </Panel>
      </Collapse>
    </Card>
    <Modal v-model="dialogTableVisible" title="收费明细" footer-hide="false" width="50%">
      <Table stripe :columns="columns" :data="data"></Table>
    </Modal>
  </div>
</template>
<script setup>
import { useCommonStore } from '@/stores/common.js'
const commonStore = useCommonStore()
const policy = ref('')
policy.value = commonStore.getPolicy()
import http from '@/util/http1'

const props = defineProps({})

const columns = [
  {
    type: 'index',
    width: 80,
    title: '序号',
    align: 'center',
  },
  {
    title: '项目类别',
    key: 'val1',
  },
  {
    title: '项目名称',
    key: 'val2',
  },
  {
    title: '单价',
    key: 'val3',
  },
  {
    title: '数量',
    key: 'val4',
  },
  {
    title: '金额',
    key: 'val5',
  },
]
const data = ref([])

const details = reactive({
  payStandard: 12000,
  standardDays: 7,
  currentCost: 13000,
  currentDays: 7,
})

const checkListItems = ref([])

const basicCheckItems = [
  { field: '患者证件号码', rule: '身份证号长度应为15位或18位' },
  { field: '年龄（天）', rule: '年龄（天）格式应为正整数，且≤365' },
  { field: '必填字段为空', rule: '' },
]

const openValue = [1, 2, 3]

const diseaseList = ref([])

const recommendations = ref([])

const operationList = ref([])

const groupParams = reactive({
  LeaveType: -1, //默认-1，非死亡离院
  age: 0,
  ageUnit: 1, // 0 天；1 岁 ,
  cardId: '',
  costStructureList: [],
  departmentCode: '',
  diagnosisRecommend: {},
  groupInfo: {},
  inDays: 0, // 截止当前实际住院天数
  inTime: new Date(),
  insuedType: 1, // 医保类型 1职工2居民
  settleId: '',
  sexCode: 1, //性别1男2女
  totalCost: 0,
  weight: 0,
})
const insuedType = ref('职工医保')
const dialogTableVisible = ref(false)
const viewChargeDetail = () => {
  dialogTableVisible.value = true
}

// 主诊断获取主手
const changeDiagItems = async (val) => {
  console.log(val, 'val')
  const res = await http.get('/Grouper/DIP/SuggestGroupDiagnose', { diagnoseCode: val })
  diseaseList.value = res.data
  console.log(res, '手术推荐列表')
}

// 主手获取主诊
const getOption = async (val) => {
  console.log(val, 'val')
  const res = await http.get('/Grouper/DIP/SuggestGroupOperation', { operationCode: val })
  operationList.value = res.data
  console.log(res, '诊断推荐列表')
}

const getPlugQCInfo = async (params) => {
  const res = await http.post('/QC/Err/FromPlugin', params)
  checkListItems.value = res.data
  console.log(res, '插件清单质控信息')
}

const emits = defineEmits(['selectPlugOption'])
const selectOption = (item) => {
  emits('selectPlugOption', item)
}

// 获取推荐信息
const getRecommendInfo = async (params) => {
  const res = await http.get('/Settlement/List/Suggest', { certNo: params })
  // recommendations.value = res.data.diagnoset_Json
  console.log(res.data, '推荐诊断')
}

defineExpose({
  getOption,
  changeDiagItems,
  getPlugQCInfo,
  getRecommendInfo,
})
</script>
<style lang="less" scoped>
.plugin-box {
  width: 100%;
  background-color: #fff;
  padding: 20px;
  border: 2px solid #000;
  border-left: none;
  .quality-page {
    padding: 24px;
  }
  .mb-16 {
    margin-bottom: 16px;
  }
  .pre-group-card .code {
    font-weight: bold;
  }
  .stat {
    text-align: center;
  }
  .stat .label {
    color: #888;
  }
  .stat .value {
    font-size: 16px;
    margin-top: 4px;
  }
  .stat .error {
    color: #f50;
  }
  .detail-row span {
    font-size: 14px;
    color: #555;
  }
  .score-card .score-box {
    text-align: center;
  }
  .score-card .main-score {
    font-size: 28px;
    font-weight: bold;
  }
  .score-card .sub-label {
    font-size: 14px;
    color: #888;
    margin-top: 4px;
  }
  .legend {
    width: 12px;
    height: 12px;
    display: inline-block;
    margin-right: 4px;
  }
  .legend-affect {
    background: #f50;
  }
  .legend-unaffect {
    background: #faad14;
  }
  .top {
    width: 100%;
    height: 100%;
    .top1 {
      display: flex;
      justify-content: space-between;

      .span1 {
        display: flex;
        align-items: center;
        color: #fff;
        background-color: #409eff;
        padding: 2px 8px;
        font-size: 13px;
        border-radius: 5px;
        height: 17px;
      }

      .span2 {
        margin-right: 8px;
        margin-top: 8px;
      }
    }
  }
}
</style>
